<template>
<div id="home">
	<div class="calendar-box">
		<div class="flex">
			<i class="el-icon-date"></i>
			<div class="event-box">
				<div class="event-title">未处理事项(件)</div>
				<div class="event-num">3</div>
			</div>
		</div>	
		<calendar :insert="true" :lunar="true" :selected="sign" @change="change" />
		<el-divider></el-divider>
		<div class="log-box" v-if="logData!=''">
			<el-timeline>
				<el-timeline-item :timestamp="logData.fulldate+' 农历 '+logData.lunar.IMonthCn+logData.lunar.IDayCn+' '+logData.extraInfo.info" placement="top">
					<el-card v-if="logData.extraInfo.data">
						<div class="log-title">{{logData.extraInfo.data.title}}</div>
						<div class="log-info">{{logData.extraInfo.data.time}} {{logData.extraInfo.data.content}}</div>
					</el-card>
				</el-timeline-item>
			</el-timeline>
		</div>
	</div>
	<div id="myChart" class="echartBox"></div>
	<div class="tjTable">
		<h2>孝感市备案统计表</h2>
		<hr>
		<el-table :data="tableData" show-summary border size="medium">
			<el-table-column align="center" prop="addr" label="地区"></el-table-column>
			<el-table-column align="center" prop="ghba" label="规划备案" ></el-table-column>
			<el-table-column align="center" prop="xkba" label="许可备案" ></el-table-column>
			<el-table-column align="center" prop="stopPoint" label="停靠点" ></el-table-column>
			<el-table-column align="center" prop="sum" label="合计" class-name="sum"></el-table-column>
		</el-table>
	</div>
</div>
</template>

<script>
import { mapGetters } from "vuex";
import calendar from "@/components/calendar/calendar.vue";
import { getHotPoint,getHolidayAll,getHolidayDetail } from "@/api/index";
require('echarts/extension/bmap/bmap')
export default {
	name: "Dashboard",
	components: { calendar },
	computed: {
		...mapGetters(["name"]),
	},
	data() {
		return {
			sign: [
				{ 
					date: "2021-03-01", info: "日志", 
					data: { title: '巡河', content: '河道巡视,查看采砂情况',time:'09:30' },
				},
				{ date: "2021-03-02", info: "日志", data: { title: '处理违章', content: '采砂违章情况处理',time:'14:30' }, },
				{ date: "2021-03-03", info: "日志", data: { title: '测量水位', content: '汛期河道水位测量',time:'10:00' }, },
			],
			tableData:[
				{addr:'孝昌',ghba:'1',xkba:'7',stopPoint:'1',sum:'9'},
				{addr:'大悟',ghba:'2',xkba:'6',stopPoint:'2',sum:'10'},
				{addr:'安陆',ghba:'3',xkba:'5',stopPoint:'3',sum:'11'},
				{addr:'孝南',ghba:'4',xkba:'4',stopPoint:'4',sum:'12'},
				{addr:'云梦',ghba:'5',xkba:'3',stopPoint:'3',sum:'11'},
				{addr:'汉川',ghba:'6',xkba:'2',stopPoint:'2',sum:'10'},
				{addr:'应城',ghba:'7',xkba:'1',stopPoint:'1',sum:'9'}
			],
			logData:''
		};
	},
	mounted() {
		let myChart = this.$echarts.init(document.getElementById('myChart'));
		getHotPoint().then((res) => {
			var points = [].concat.apply(
				[],
				res.data.items.map(function (track) {
					return track.map(function (seg) {
						return seg.coord.concat([1]);
					});
				})
			);

			myChart.setOption(
				{
					animation: false,
					bmap: {
						center: [120.13066322374, 30.240018034923],
						zoom: 14,
						roam: true,
					},
					visualMap: {
						show: false,
						top: "top",
						min: 0,
						max: 5,
						seriesIndex: 0,
						calculable: true,
						inRange: {
							color: ["blue", "blue", "green", "yellow", "red"],
						},
					},
					series: [
						{
							type: "heatmap",
							coordinateSystem: "bmap",
							data: points,
							pointSize: 5,
							blurSize: 6,
						},
					],
				}
			);
			// 添加百度地图插件
			var bmap = myChart.getModel().getComponent("bmap").getBMap();
			bmap.addControl(new BMap.MapTypeControl());
		});
		getHolidayAll('2021').then(res=>{
			console.log(res)
			let str=res.result.data.holiday_list
			for(let i=0;i<str.length;i++){
				this.getholidat(str[i].startday.substring(0,str[i].startday.lastIndexOf("\-")))
				// this.sign.push({
				// 	date: str[i].startday, 
				// 	info: str[i].name,
				// 	data:{
				// 		holiday:1
				// 	}
				// })
			}
		})
		
	},
	methods: {
		getholidat(date){
			getHolidayDetail(date).then(res=>{
				console.log("详情",res)
				let arr=res.result.data.holiday_array;
				for(let i=0;i<arr.length;i++){
					for(let j=0;j<arr[i].list.length;j++){
						if(arr[i].festival==arr[i].list[j].date){
							this.sign.push({
								date: arr[i].festival, 
								info: arr[i].name,
								data:{
									holiday:'1'
								}
							})
						}else{
							this.sign.push({
								date: arr[i].list[j].date, 
								info: '',
								data:{
									holiday:arr[i].list[j].status
								}
							})
						}
					}
				}
				// this.sign=[...new Set(this.sign)]
			})
		},
		change(e) {
			console.log(e);
			if(JSON.stringify(e.extraInfo) != "{}"){
				this.logData=e;
			}else{
				this.logData='';
			}
			
		},
	},
};
</script>

<style lang="scss" scoped>
#home{
	display: flex;
	align-items: flex-start;
	.calendar-box{
		width: 400px;
		background: #fff;
		.flex{
			padding: 10px;
		}
		.el-icon-date{
			font-size: 50px;
			color: #007aff;
		}
		.event-box{
			margin-left: 20px;
			.event-title{
				color: #999;
			}
			.event-num{
				color: #333333;
				font-size: 20px;
				font-weight: bold;
				margin-top: 5px;
			}
		}
		.log-box{
			padding-right: 10px;
			.log-title{
				font-weight: bold;
				font-size: 16px;
			}
			.log-info{
				margin-top: 10px;
			}
		}
	}
	.echartBox{
		flex: 1;
		height: 500px;
		margin-left: 20px;
	}
	.tjTable{
		flex: 1;
		max-width: 500px;
		margin-left: 20px;
	}
}
</style>
<style lang="scss">
#home{
	.sum{
		background-color: #f5f7fa !important;
	}
	.el-timeline{
		padding-left: 10px;
	}
}
</style>
